<template>
  <div class="foodView-container">
    <van-tabs color="#ff8700" title-active-color="#ff8700" sticky>
      <van-tab v-for="item in affectCateList" :title="item.name" :key="item.id">
        <food-item :affectCate="item" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getAllAffectCate } from "@/api/food";
import FoodItem from "./components/foodItem.vue";
export default {
  name: "FoodView",
  components: {
    FoodItem,
  },

  data() {
    return {
      affectCateList: [], // 食图分类
    };
  },

  mounted() {
    getAllAffectCate().then((res) => {
      this.affectCateList = res.data;
    });
  },

  methods: {},
};
</script>

<style lang="less" scoped>
.foodView-container {
  min-height: 100%;
  height: auto;
  background-image: url("../../assets/images/myplanbg.png");
  background-size: cover;
}
</style>